<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>知云——针对编程的个性化学习推荐系统</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>

    <base href="${APP_PATH}">
    <link rel="shortcut icon" type="image/x-icon" href="${APP_PATH}/static/favicon.ico"/>
    <link rel="stylesheet" href="${APP_PATH}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/toastr.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/offcanvas.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/fontawesome.min.css">
</head>


<style>
    .answerPanel img {
        width: 100%;
        overflow: hidden;
    }

</style>
<body>

<jsp:include page="${APP_PATH}/common/head-question.jsp"/>
<c:choose>
    <c:when test="${not empty user}">
        <%--用户已登陆--%>
        <div id="defaultDiv" data-userId="${user.id}" class="mt-2 col-sm-12 col-md-12 col-lg-9"
             style="margin-left: auto;margin-right: auto;">
            <div class="d-flex p-3 bg-white mb-2 rounded shadow-sm">
                <div class="flex-fill text-center"><a href="/question-all" class="text-dark"><i
                        class="fa fa-question"></i>我的提问</a></div>
                <div class="flex-fill text-center"><a href="#" class="text-danger"><i class="fa fa-table"></i>我的回答</a>
                </div>
                <div class="flex-fill text-center"><a href="/question-star" class="text-dark"><i
                        class="fa fa-anchor"></i>关注问题</a></div>
                <div class="flex-fill text-center"><a href="/question-write" class="text-dark"><i
                        class="fa fa-arrow-circle-right"></i>去提问</a></div>
            </div>

            <div>
                <div id="mainArea">

                </div>
                <div id="pageNavArea">

                </div>
            </div>
        </div>
    </c:when>
    <c:otherwise>
        <%--没有登录，提示用户--%>
        <div class="offset-lg-4 col-lg-4 col-md-12 col-sm-12">
            <div class="alert-warning p-3">
                <h4>您还没有登录，请先<a href="/login">登录</a></h4>
            </div>
        </div>
    </c:otherwise>
</c:choose>


<script src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>
<script src="${APP_PATH}/static/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/static/js/toastr.min.js"></script>
<script src="${APP_PATH}/static/js/offcanvas.js"></script>

<script>
    function hasLogin() {
        var userId = $("#defaultDiv").attr("data-userId");
        return userId.length === 16;
    }

    //修改回答
    function updateAnswer(ele) {
        if (!hasLogin()) {
            toastr.error("请先登录！");
            return false;
        }
        var answerId = $(ele).attr("data-answerId");
        if (confirm("我们并不提倡全文修改，只开放追加修改，是否继续？")) {
            window.location.href = "/answer/update/" + answerId;
        }
    }

    //删除回答，仅限于问题提问者
    function deleteAnswer(ele) {
        if (!hasLogin()) {
            toastr.error("请先登录！");
            return false;
        }
        var answerId = $(ele).attr("data-answerId");
        if (confirm("确定删除该回答吗？此操作不可逆，请确认！！！")) {
            $.ajax({
                url: '/delete/answer/' + answerId,
                type: 'GET',
                success: function (result) {
                    if (result.code === 100) {
                        window.location.reload(true);
                    } else {
                        toastr.error(result.extend.error);
                    }
                }
            });
        }
    }

    //构建问题页面
    function buildPageArea(result) {
        //清空
        var $mainArea = $("#mainArea");
        $mainArea.empty();
        $.each(result.extend.pageInfo.list, function (index, item) {
            var div_out = $("<div class='bg-white my-2 p-2 rounded'></div>");
            var div_title = $("<div class='border-bottom border-gray mb-1'><h5><a href='/question/"+item.questionid+"' class='text-dark'>" + item.questiontitle + "</a></h5></div>");
            var div_answercontent = $("<div class='answerPanel border-bottom border-gray' style='max-height: 250px;overflow-y: auto'>" + item.answercontent + "</div>").append($("<div class='text-muted'>" + new Date(item.edittime).toLocaleString() + "</div>"));
            //删除按钮，修改按钮
            var div_button = $("<div class='pt-2'><a class='btn btn-sm btn-outline-secondary' data-answerId='" + item.id + "' onclick='updateAnswer(this)'>修改</a><a class='ml-2 btn btn-sm btn-outline-danger' data-answerId='" + item.id + "' onclick='deleteAnswer(this)'>删除</a></div>");
            div_out.append(div_title).append(div_answercontent).append(div_button).appendTo($mainArea);
        });
    }

    //构建问题页面的页码
    function buildPageNavArea(result) {
        var $pageNavArea = $("#pageNavArea");
        $pageNavArea.empty();

        var div = $("<div class='p-2'>");
        var ul = $("<ul></ul>").addClass("pagination");
        //遍历给ul中添加页码提示
        $.each(result.extend.pageInfo.navigatepageNums, function (index, item) {

            var numLi = $("<li class='page-item'></li>").append($("<a class='btn btn-sm btn-outline-primary mr-2'></a>").append(item));
            if (result.extend.pageInfo.pageNum === item) {
                //当前页按钮，不可点击
                numLi.find("a").removeClass("btn-outline-primary");
                numLi.find("a").addClass("disabled");
                numLi.find("a").addClass("btn-primary");
            }
            numLi.click(function () {
                toPage(item);
            });
            ul.append(numLi);
        });
        div.append(ul).appendTo($pageNavArea);
    }

    //分页获取用户提的问题
    function toPage(pn) {
        var userId = $("#defaultDiv").attr("data-userId");
        if (userId.length === 16) {
            $.ajax({
                url: '/answer/mine/' + pn,
                type: 'GET',
                success: function (result) {
                    if (result.code === 100) {
                        console.log(result);
                        if (result.extend.pageInfo.list.length > 0) {
                            //问题不为空，开始构建页面
                            buildPageArea(result);
                            buildPageNavArea(result);
                        } else {
                            toastr.info("你还没有添加任何回答！");
                        }
                    } else {
                        toastr.error("获取数据失败，请重新登录！");
                    }
                }
            });
        } else {
            toastr.error("获取数据失败，请重新登录！");
        }
    }

    $(function () {
        toPage(1);
    })
</script>
</body>

</html>
